


<template>
  <div id="shop">
    <h1>管理员列表</h1>

    <el-table :data="nuer.filter(data => !search || data.adminName.toLowerCase().includes(search.toLowerCase()))" border>
      <el-table-column align="center" fixed prop="_id" label="管理员ID" width="310"></el-table-column>
      <el-table-column align="center" prop="adminName" label="管理姓名" width="150"></el-table-column>
      <el-table-column align="center" prop="password" label="管理员密码" width="150"></el-table-column>
      <el-table-column align="center"  width="180">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button  size="mini" @click="handleEdit(scope.row._id)">修改</el-button>
          <el-button type="text" @click="open(scope.row._id)">
            <el-button size="mini" type="danger">删除</el-button>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改管理员" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="user">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="user.adminName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="user.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit(user)">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
var { mapState, mapActions } = createNamespacedHelpers("admin");
export default {
  data() {
    return {
      user: [{
        adminName: "",
        password: ""
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "80px",
      search: ""
    };
  },
  computed: {
    ...mapState(["nuer"])
  },
  created() {
    this.getadminacti();
  },
  methods: {
    ...mapActions(["getadminacti", "dilet", "xian", "submitadminer"]),
    open(data) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message(
            {
              type: "success",
              message: "删除成功!"
            },
            this.dilet(data),
            this.getadminacti()
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async handleEdit(row) {
      var data = await this.xian(row);
      this.user = data[0];
      this.dialogFormVisible = true;
    },
    //修改商家
    submit(data) {
      this.dialogFormVisible = false;
      this.submitadminer(data);
      this.getadminacti();
    }
  }
};
</script>
<style>
h1 {
  text-align: center;
  line-height: 40px;
  color: white;
}
.el-table {
  margin: 0 auto;
}
#shop {
  margin: 0 auto;
  width: 800px;
  background-color: rgb(46, 45, 45);
}
</style>